<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>收货地址</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="../mui/hello-mui/css/mui.min.css">
    <!-- 扩展图标库 -->
    <link rel="stylesheet" href="../mui/hello-mui/css/icons-extra.css" type="text/css">
    <!-- de-css -->
    <link rel="stylesheet" href="../dece/css/de-css.css">

    <script src="../dece/js/app.js" type="text/javascript"></script>
    <script src="../dece/js/vue.js" type="text/javascript"></script>
    <script src="../dece/js/axios.min.js" type="text/javascript"></script>
    <!-- 引入饿了么样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入饿了么组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style type="text/css">
        .btn_group {
            display: flex;
            justify-content: space-between;
        }
        /*设为默认地址按钮*/
        .set_default {
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            align-items: center;
            position: fixed;
            bottom: 20px;
            width: 100%;
        }
        .set_default > button {
            width: 80%;
            color: #fff;
            font-size: 16px;
            border: 1px solid #f56c6c;
            background-color: #f56c6c;
            border-radius: 6px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <header class="mui-bar mui-bar-transparent">
            <a href="javascript:history.go(-1);" class="mui-icon mui-action-back mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">收货地址</h1>
        </header>
        <div class="mui-content" style="margin-top: 44px; padding: 10px;">
            <form class="mui-input-group">
                <div class="mui-input-row">
                    <label>姓名</label>
                    <input v-model="truename" type="text" placeholder="请输入姓名">
                </div>
                <div class="mui-input-row">
                    <label>手机</label>
                    <input v-model="mobile" type="text" placeholder="请输入手机">
                </div>
            </form>
            <textarea v-model="detail" rows="5" placeholder="由于配送地区仅限山西灵丘县境内,请填写灵丘县相关地址,如：灵丘一中520室"></textarea>
            <div class="btn_group">
                <button @click="address_del" v-if="id != 0" type="button" class="mui-btn mui-btn-danger">删除</button>
                <button @click="address_save" type="button" class="mui-btn mui-btn-primary">确认</button>
            </div>
            <!-- 设为默认 -->
            <div v-if="id != 0" class="set_default">
                <button @click="set_default">下单默认该地址</button>
            </div>
        </div>
    </div>
    <script type="text/javascript" charset="utf-8">
        new Vue({
            el: "#app",
            data: {
                api_host: de.api_host,
                truename: "",
                mobile: "",
                detail: "",
                id: 0,
            },
            created: function (){
                // 验证是否登陆
                if (!de.auth_login()) {
                    de.href("../login.html");
                }
                this.address_index();
            },
            mounted: function (){
            },
            methods: {
                // 获取收货地址信息
                address_index: function (){
                    var id = de.get('id');
                    this.id = id;
                    if (id == undefined || id == 0) {
                        return false;
                    }
                    var the = this;
                    var login = de.auth_login();
                    // 提交数据
                    axios.post(de.address_index, {token: login, id: id}).then(function (data){
                        var dd = data.data;
                        console.log(dd);
                        if (dd.code == 200) {
                            the.truename = dd.data.truename;
                            the.mobile = dd.data.mobile;
                            the.detail = dd.data.detail;
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                // 添加收货地址
                address_save: function (){
                    var the = this;
                    var login = de.auth_login();
                    var param = {token: login, truename: the.truename, mobile: the.mobile, detail: the.detail};
                    if (this.id != 0) { param.id = this.id; }
                    // 提交数据
                    axios.post(de.address_save, param).then(function (data){
                        var dd = data.data;
                        console.log(dd);
                        if (dd.code == 200) {
                            de.href('./address.html');
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                // 删除收货地址
                address_del: function (){
                    var the = this;
                    var login = de.auth_login();
                    if (this.id == undefined || this.id == 0) {
                        return false;
                    }
                    var param = {token: login, id: the.id};
                    // 提交数据
                    axios.post(de.address_del, param).then(function (data){
                        var dd = data.data;
                        // console.log(dd);
                        if (dd.code == 200) {
                            de.href('./address.html');
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                // 设为默认收货地址
                set_default: function (){
                    var the = this;
                    var login = de.auth_login();
                    if (this.id == undefined || this.id == 0) {
                        return false;
                    }
                    var param = {token: login, id: the.id};
                    // 提交数据
                    axios.post(de.address_set_default, param).then(function (data){
                        var dd = data.data;
                        // console.log(dd);
                        if (dd.code == 200) {
                            de.href('../shop/submit_order.html');
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
            },
        });
    </script>
</body>

</html>